<!-- 可复用的 异步组件 包装器 -->
<template>
	<slot v-if="isLoaded" :component="loadedComponent" />
	<div v-else-if="isLoading" class="loading-state">
		<slot name="loading">
			默认加载中状态...
		</slot>
	</div>
	<div v-else-if="error" class="error-state">
		<slot name="error" :error="error">
			加载失败: {{ error }}
		</slot>
		<button @click="retry">重试</button>
	</div>
</template>

<script setup>
	import {
		ref,
		defineAsyncComponent
	} from 'vue'

	const props = defineProps({
		component: {
			type: Function,
			required: true
		},
		delay: {
			type: Number,
			default: 200
		},
		timeout: {
			type: Number,
			default: 10000
		}
	})

	const isLoaded = ref(false)
	const isLoading = ref(false)
	const error = ref(null)
	const loadedComponent = ref(null)

	async function loadComponent() {
		try {
			isLoading.value = true
			error.value = null
			loadedComponent.value = await props.component()
			isLoaded.value = true
		} catch (err) {
			error.value = err.message || '加载失败'
		} finally {
			isLoading.value = false
		}
	}

	function retry() {
		loadComponent()
	}

	// 初始加载
	loadComponent()
</script>

<style>
	.loading-state {
		padding: 20px;
		text-align: center;
		color: #666;
	}

	.error-state {
		padding: 20px;
		text-align: center;
		color: #f56c6c;
	}
</style>